import React, {useEffect, useState} from 'react';
import { useHistory } from "react-router-dom";

import Txt from "../../../components/txt/Txt";
import './frequency.less';
import http from "../../../model/http";
import { PullToRefresh, Card, Flex, Stepper, List, Button, Toast } from "antd-mobile";
import Header from "../../../components/header/Header";
const h = document.documentElement.clientHeight - 40;

/**
 * @name 判断iOS
 */ 
const isiOS = ()=>{
  let u = navigator.userAgent;
  let iOs = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端\
  return iOs;
}

function Frequency() {
  const history = useHistory();
  const [list,setList] = useState([]);
  const [load,setLoad] = useState(false);
  const [isiOSBool,setIsiOSBool] = useState(false)
  // const getList = ()=>{
  //   (async ()=>{
  //     setLoad(true);
  //     const _list = await http.post('/customer/checkCustomerScheduleTrInfo',{
  //       customerCrmId:history.location.state.customerCrmId, page:page,items:20
  //     })
  //     setTimeout(()=>{setLoad(false)},800)
  //     if(!_list.data.length) return;
  //     page++;
  //     setList([...list,..._list.data]);
  //   })()
  // }

  const getList = ()=>{
    (async ()=>{
      setLoad(true);
      const _list = await http.post('/customer/checkCustomerScheduleTrDetail',{
        customerCrmId:history.location.state.item.tb_customer_id,
        serviceId:history.location.state.item.crdId
      })
      setTimeout(()=>{setLoad(false)},800) 
      console.log(_list)
      setList(_list.data)
    })()
  }

  useEffect(()=>{
    history.location.state.historyGo != undefined && history.location.state.historyGo == '1' ? setList(JSON.parse(sessionStorage.getItem('frequencyData'))) : getList()
    
    if(isiOS() == true){
      setIsiOSBool(true)
    }
  },[])

  const doctor =(item)=>{
    history.push('/yuyue/edit2',{
      outUser:history.location.state,
      item:item
    });
  }

  const projectNumChange = (e,data) => {
    console.log(e)
    console.log(data)
    // 判断如果小于剩余次数
    if(e <= data.zcs - data.yzcs){  
      list.map(item => {
        if(item.itemid == data.itemid){
          item.times = e
        }
      })
      console.log(list)
      setList(list)
    }  
  }
  const nextStep = () => {
    console.log('触发下一步')
    // 存入缓存 返回上一步操作的时候进行
    sessionStorage.setItem('frequencyData',JSON.stringify(list))

    let displayname = list.filter(item => {return item.times != undefined && item.times != 0}) 
    console.log(displayname)
    if(displayname.length == 0){
      Toast.fail('请选择治疗项目')
      return false;
    }
    let displaynameString = ''
    displayname.map((item,index) => {
      displaynameString+=`${index+1}、${item.itemname}<br/>`
    })

    history.location.state.item.displayname = displaynameString

    history.push('/yuyue/edit2',{
      outUser:history.location.state.outUser,
      item:history.location.state.item
    });
  }

  return (
    
      <div className='v-yuyue-project-frequency'>
        <div className="body-background-div"></div>
        {list.map((item,idx)=>(
          <Card>
            <Card.Header title={item.itemname} />
            <Card.Body>
              {/* 内容 */} 
                <Flex>
                  <Flex.Item><div className=''>应付：{item.payable_amt}</div></Flex.Item>
                  <Flex.Item><div className=''>已付：{item.paid_amt}</div></Flex.Item>
                </Flex>
                <Flex>
                  <Flex.Item><div className=''>总次数：{item.zcs}</div></Flex.Item>
                  <Flex.Item><div className=''>已诊次数：{item.yzcs}</div></Flex.Item>
                  <Flex.Item><div className=''>未诊次数：{item.wzcs}</div></Flex.Item>
                </Flex> 
                <List>
                  <List.Item extra={
                    <Stepper
                      style={{ width: '100%', minWidth: '100px' }}
                      showNumber
                      step
                      max={Number(item.zcs - item.yzcs)}
                      min={0}
                      defaultValue={item.times?item.times:0} 
                      onChange={(e) => projectNumChange(e,item)}
                    />  }>
                    预约次数
                  </List.Item>
                </List>
                
            </Card.Body> 
          </Card>
        ))}

                     
        {/* className={isiOSBool?'frequency-next-step2':'frequency-next-step'} */}
        <Button style={{marginTop:'25px'}}  type="primary"  onClick={nextStep}>下一步</Button>    
        <Header />
      </div>
    
  )
}

export default Frequency;